<!-- 页面权限管理 -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>页面管理</title>
  <meta name="keywords" content="">
  <meta name="description" content="">

  <link rel="shortcut icon" href="favicon.ico">
  <link href="../css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
  <link href="../css/font-awesome.css?v=4.4.0" rel="stylesheet">
  <link href="../css/animate.css" rel="stylesheet">
 
  <link rel="stylesheet" type="text/css" href="../tree_grid/themes/default/easyui.css">
  <link rel="stylesheet" type="text/css" href="../tree_grid/themes/icon.css">
  <link rel="stylesheet" type="text/css" href="../tree_grid/demo.css">
  <script type="text/javascript" src="../tree_grid/jquery.min.js"></script>
  <script type="text/javascript" src="../tree_grid/jquery.easyui.min.js"></script>
  <script type="text/javascript" src="../mock/mock-min.js"></script>
  <script src="../js/bootstrap.min.js?v=3.3.6"></script>

  <!-- 自定义js、css -->
  <link rel="stylesheet" href="../css/labMgt/modal.css">
</head>

<body class="gray-bg">
  <div class="wrapper wrapper-content animated fadeInRight">
    <div style="margin:10px 0;">
      <button class="btn btn-sm btn-primary" type="submit">保存</button>
    </div>

    <table id="treegrid" title="页面管理" class="easyui-treegrid" style="width:100%;height:300px"
      data-options="
        url: '',
        method: 'get',
        rownumbers: true,
        idField: 'id',
        treeField: 'name',
        onContextMenu: onContextMenu
      ">
      <thead>
        <tr>
          <th data-options="field:'name'" width="40%">菜单名称</th>
          <th data-options="field:'url'" width="20%" align="center">URL</th>
          <th data-options="field:'icon'" width="10%" align="center">图标</th>
          <th data-options="field:'type'" width="10%" align="center">类型</th>
          <th data-options="field:'apply'" width="20%" align="center">应用</th>
        </tr>
      </thead>
    </table>
    <div id="treegrid_menu" class="easyui-menu" style="width:120px;">
      <div data-toggle="modal" data-target="#addForm">新增节点</div>
      <div >新增子节点</div>
      <div class="menu-sep"></div>
      <div>向上移到</div>
      <div >向上移到</div>
      <div class="menu-sep"></div>
      <div>编辑节点</div>
      <div>删除节点</div>
    </div>
  </div>

  <!-- 新增页面节点 start -->
  <div class="modal fade" id="addForm" role="dialog"
    aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <h5 class="modal-title" id="myModalLabel">新增菜单</h5>
        </div>
        <div class="modal-body">
          <form>
            <table class="form-table">
              <tbody>
                <tr>
                  <td class="title">菜单名称：</td>
                  <td><input name="username" type="text"><b>*</b></td>
                </tr>
                <tr>
                  <td class="title">URL：</td>
                  <td><input name="url" type="text"><b>*</b></td>
                </tr>
                <tr>
                  <td class="title">图标：</td>
                  <td><input name="icon" type="text"><b>*</b></td>
                </tr>
                <tr>
                  <td class="title">类型：</td>
                  <td>
                    <select id="">
                      <option>请选择</option>
                      <option value="1">应用</option>
                      <option value="0"></option>
                    </select>
                  </td>
                </tr>
                <tr>
                  <td class="title">上级菜单：</td>
                  <td><input name="last" type="text"></td>
                </tr>
                <tr>
                  <td class="title">是否隐藏：</td>
                  <td>
                    <select id="">
                      <option>请选择</option>
                      <option value="1">是</option>
                      <option value="0">否</option>
                    </select>
                  </td>
                </tr>
                <tr>
                  <td class="title">描述：</td>
                  <td><textarea name="note" type="text"></textarea></td>
                </tr>
              </tbody>
            </table>
          </form>          
        </div>
        <div class="modal-footer">
          <div class="text-center col-sm-12">
            <button class="btn btn-sm btn-info" type="submit">查 询</button>
            <button class="btn btn-sm btn-white" data-dismiss="modal">取 消</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 新增页面节点 end -->

  <script type="text/javascript">

    var data  = [{
      id:1,
      name:"人员管理",
      url:"/",
      icon:"",
      type:"应用",
      children:[{
        id:2,
        name:"人员信息",
        url:"/videoMonitor",
        icon:"",
        type:"应用",
        children:[{
          id:21,
          name:"人员查看",
          size:"是",
          url:"/workerInfoDetail",
          date:"01/13/2010",
        }, {
          id:211,
          name:"人员新增",
          url:"/workerInfoDetail",
          date:"01/13/2010",
        }]
      }]
    }];

    $(document).ready(function(){
      $('#treegrid').treegrid("loadData",data);
    });

    function onContextMenu(e,row){
      if (row) {
        e.preventDefault();
        $(this).treegrid('select', row.id);
        $('#treegrid_menu').menu('show',{
          left: e.pageX,
          top: e.pageY
        });                
      }
    }
  </script>
</body>

</html>